﻿@using Resource;
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    @{ await Html.RenderPartialAsync("/Views/Shared/_LayoutScript.cshtml"); }
    @{ await Html.RenderPartialAsync("/Views/Shared/_StyleCss.cshtml"); }
    @*<!-- 引入 xlsx 库<script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>-->*@
    <script src="/lib/xlsx/xlsx.full.min.js?v=@DateTime.Now.Ticks"></script>

    <link href="/css/AssemblyProd.css?v=@DateTime.Now.Ticks" rel="stylesheet" />
    <style>
        .show_mode {
            border-radius: 0.1rem;
            position: absolute;
            z-index: 99;
            height: 10.6rem;
            width: 100%;
            /*text-align: center;*/
            background: #a2c2e2;
            display: none;
        }

        .contentdetail {
            background-color: white;
            height: 10.4rem;
            width: 100%;
            padding: .1rem .3rem .1rem .3rem;
            color: black;
        }

        .show_mode > .contentdetail > div {
            color: black;
            height: 33.3%;
            width: 50%;
            float: left;
            border-block: solid #ffffff 1px;
        }

        .show_mode > .contentdetail > div > label {
            color: black;
        }

        .detail {
            color: black;
            background-color: #dfe4ee;
            height: 3rem;
            width: 100%;
        }

        .mode_close {
            float: right;
        }

        .mode_close:hover {
            background-color: #848690;
        }

        .ZebraNo {
            color: black;
            background-color: #e8f1f9;
        }

        .ZebraTo {
            color: black;
            background-color: #ffffff;
        }

        .note {
            color: red;
            font-size: 0.15rem;
            font-weight: bolder;
        }

        .devicedetailt {
            color: black;
            border: 1px solid #007297;
            margin-top: 16.5%;
            position: absolute;
            top: -28%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            display: none;
            width: 100.2%;
            height: 112%;
            text-align: center;
            padding: 0.12rem;
            background-color: #fff;
            border-radius: 0.1rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .tester_hour {
            float: left;
        }

        #myTable {
            color: black !important;
        }

        /*table滚动条*/
        #tester_table {
            color: black;
            font-size: 0.125rem;
            overflow-y: auto;
        }

        table {
            color: black;
            width: 100%;
            border-collapse: collapse;
            /*table-layout: fixed;*/
        }

        thead {
            color: black;
            text-align: center;
            margin: auto;
            /*height: 0.2rem;*/
            position: sticky;
            top: 0;
            background-color: #a2c2e2;
            /*#a1e1e1;*/
        }

        thead > tr {
            color: black;
            font-size: 0.13rem;
            height: 0.5rem;
        }

        th, td {
            color: black;
            padding: 0.05rem;
            /*border: 1px solid #0aa9cd;*/
            border: 1px solid #c2c3c4;
        }

        tfoot {
            font-size: 0.13rem;
            position: sticky;
            bottom: 0;
            background-color: #a2c2e2; /*#a1e1e1*/
            /* height: 0.45rem;*/
        }

        tbody:hover .zebracro {
            color: black;
            background-color: #164362;
        }

        .tabletd {
            color: black;
            text-align: center;
        }

        .chart {
            color: black;
            padding: 0.2rem 0.2rem;
            border-top: none;
            width: 100%;
            height: 4.7rem;
        }
        /*设备状态*/
        .legend {
            display: flex;
            justify-content: center;
            margin-bottom: 0.2rem;
        }

        .legend > span {
            padding: 1px;
            text-align: center;
            /*border-radius: 1pc;*/
            font-size: 0.12rem;
            width: 0.6rem;
            margin: 0 0.1rem;
        }

        #devicecontent {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            width: 100%;
            height: calc(100% - 0.25rem);
            /*margin-bottom: 0.1rem;*/
            /* justify-content: center;*/
            /*滚动条*/
            /* overflow: auto;*/
        }

        .devic {
            display: inline-block;
            width: 0.25rem;
            height: 0.25rem;
            border-radius: 50%;
            color: white;
            font-size: 0.1rem;
            line-height: 0.2rem;
            margin-bottom: 0.5vh;
            position: relative;
            /*呼吸灯*/
            /*animation: devic 3s ease-in-out infinite;*/
            animation: devic 2s linear infinite;
            /*图标*/
            background: url(/images/facility.png) no-repeat center;
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            position: relative;
            overflow: hidden;
        }

        .devic::before,
        .devic::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            animation: inherit;
            animation-delay: 1s;
        }

        .devic::after {
            animation-delay: 2s;
        }

        @@keyframes devic {
            0% {
                box-shadow: 0 0 0 0.12rem var(--ripple-color);
            }

            100% {
                box-shadow: 0 0 0 0.25rem rgba(255,255,255, 0);
            }
        }

        .divfolt {
            margin: 0 0.12rem;
            padding: 0.1rem 0;
            width: 10%;
            height: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .divfolt:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .divfolt p {
            font-size: 0.1rem;
            margin: 0.1rem;
        }

        .circle {
            display: inline-block;
            width: 0.16rem;
            height: 0.16rem;
            border-radius: 50%;
            margin-right: 0.2vw;
            /*根据父元素垂直居中*/
            vertical-align: middle;
        }

        .await {
            background-color: rgba(38, 154, 188, 1);
        }

        .inidle {
            background-color: rgba(246, 139, 167, 1);
        }

        .breakdown {
            background-color: rgba(172, 41, 37, 1);
        }

        .debug, .unproduced {
            background-color: rgba(213, 133, 18, 1);
        }

        .normal {
            background-color: rgba(57, 132, 57, 1);
        }
        /*END 设备状态*/

    </style>
    <title>AssemblyProd</title>
</head>
<body class="fill-parent" style="overflow-y: hidden">
    <div class="main">
        <div class="header">
            <div class="header-left fl">
                <img src="/images/logo.png?v=@DateTime.Now.Ticks" class="scaled-image" draggable="false" oncontextmenu="return false;" ondragstart="return false;" />
            </div>
            <div class="quer">
                <spn>
                    <div id="query">
                        <select id="cmb_classtype">
                            <option value="OTD">@Label.OTD</option>
                            <option value="YTD">@Label.YTD</option>
                        </select>
                        <select id="cmb_prod_type" name="ProdType" placeholder="select prodtype">
                            <option value="ALL">@Label.ALL</option>
                            <option value="Normal">@Label.Fresh</option>
                            <option value="Rework">@Label.Rework</option>
                        </select>
                        <select id="cmb_proj_code">
                            <option value="ALL">@Label.ALL</option>
                        </select>
                        <select id="cmb_product_code">
                            <option value="ALL">@Label.ALL</option>
                        </select>
                        <select id="cmb_process">
                            <option value="ALL">@Label.PleaseSelect</option>
                        </select>
                    </div>
                </spn>
            </div>
            <div class="btn">
                <spn>
                    <div id="query">
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Desktop</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" href=@Html.Raw($"https://dashboard.li.lumentuminc.net/API/DesktopApp/Dashboard.exe?v={DateTime.Now.Ticks}") download>@Label.Local</a>
                                <a class="menudropdown" href=@Html.Raw($"https://dashboard.li.lumentuminc.net/API/DesktopApp/Dashboard_lnk.zip?v={DateTime.Now.Ticks}") download>@Label.Shortcut</a>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Data@Label.Datum</button>
                            <div class="dropdown-content">
                                <a id="btn_query" class="menudropdown" onclick="AssemblyDataExport('Assembly')">@Label.Data@Label.Export</a>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Language</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" onclick="setLanguageCookie('@Const.CNLANGUAGE')">@Label.Chinese</a>
                                <a class="menudropdown" onclick="setLanguageCookie('@Const.USLANGUAGE')">@Label.English</a>
                            </div>
                        </div>
                        <button class="modalBtn dimension">@Label.Full</button>
                    </div>
                </spn>
            </div>
            <div class="header-center fl">
                <div class="header-title"></div>
                <div class="header-img"></div>
            </div>
            <div class="header-right fl" id="time"></div>
            <div class="header-bottom fl"></div>
        </div>
        <div class="center">
            <div class="center-left fl">
                <div class="left-top rightTop border">
                    <div class="tab">
                        <button class="tablinks active" onclick="OpenTab(event,'left-top','Tab1',process_hour_prod_Chart)">@Html.Raw(Label.Process +Label.Hour+Label.Total + Label.Output)</button>
                    </div>
                    <div id="Tab1" class="tabcontent"></div>
                </div>
                <div class="left-bottom rightTop border">
                    <div class="tab">
                        <button class="timerate tablinks active" onclick="OpenTab(event,'left-bottom','Tab2',job_num_prod_Chart)">@Html.Raw("工单产出")</button>
                    </div>
                    <div id="Tab2" class="tabcontent"></div>
                </div>
            </div>
            <div class="center-right fr">
                <div class="right-top rightTop border">
                    <div class="tab">
                        <button class="tablinks active" onclick="OpenTab(event,'right-top','Tab3',operator_prod_Chart)">@Html.Raw(Label.OTD+Label.Process + Label.People + Label.Output)</button>
                    </div>
                    <div id="Tab3" class="tabcontent"></div>
                </div>
                <div class="right-bottom rightTop border">
                    <div class="tab">
                        <button class="tablinks active" onclick="OpenTab(event,'right-bottom','Tab4',failDefectPlatoChart)">FAIL柏拉图</button>
                    </div>
                    <div id="Tab4" class="tabcontent"></div>
                </div>
            </div>
        </div>
        <div class="show_mode">
            <div style="width:100%; height:0.3rem;">
                <div class="mode_close" style="height:100%;margin-right:10px;line-height:0.3rem">关闭<label style="font-size:0.2rem">&times;</label></div>
            </div>
            <div class="contentdetail"></div>
        </div>
    </div>

    <script type="text/javascript" href="?v=@DateTime.Now.Ticks">
        //模板初始化配置
        $(".show_mode").css("display", "none");
        /*标题*/
        $(document).ready(function () {
            var whei = $(window).height();
            $("html").css({ fontSize: whei / 12.5 });
            $(window).resize(function () {
                if ($(".dimension").text() == "@Html.Raw(Label.Full)") {
                    var whei = $(window).height();
                    $("html").css({ fontSize: whei / 12.5 });
                }
                else {
                    var whei = $(window).width();
                    $("html").css({ fontSize: whei / 22 })
                }
            });

            /*当前时间*/
            function numberToUpperCase(number) {
                var uppercaseMonths = [
                    '一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月'
                ];
                return uppercaseMonths[number - 1];
            }
            var myDate = new Date();
            var result = numberToUpperCase(myDate.getMonth() + 1);
            $('.header-title').html("@Html.Raw(Label.Board_AssemblyCapacity)");
            function getTime() {
                var myDate = new Date();
                var myYear = myDate.getFullYear(); //年
                var myMonth = myDate.getMonth() + 1; //月
                var myToday = myDate.getDate(); //日
                var myDay = myDate.getDay(); //星期
                var myHour = myDate.getHours(); //小时
                var myMinute = myDate.getMinutes(); //分钟
                var mySecond = myDate.getSeconds(); //秒数
                var week = ['@Label.Sunday', '@Label.Monday', '@Label.Tuesday', '@Label.Wednesday', '@Label.Thursday', '@Label.Friday', '@Label.Saturday'];
                var nowTime;

                nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
                $('#time').html(nowTime);
            };
            function fillZero(str) {
                var realNum;
                if (str < 10) {
                    realNum = '0' + str;
                } else {
                    realNum = str;
                }
                return realNum;
            }
            setInterval(getTime, 1000);

            // 设置全屏
            $('.dimension').on('click', function (e) {
                var element = document.documentElement;
                if ($(".dimension").text() == "@Html.Raw(Label.Full)") {
                    // 判断浏览器设备类型
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.mozRequestFullScreen) {       //兼容火狐
                        element.mozRequestFullScreen();
                    } else if (element.webkitRequestFullscreen) {    //兼容谷歌
                        element.webkitRequestFullscreen();
                    } else if (element.msRequestFullscreen) {        //兼容IE
                        element.msRequestFullscreen();
                    }
                    $(".dimension").text("@Html.Raw(Label.Exit+Label.Full)");
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    $(".dimension").text("@Html.Raw(Label.Full)");
                }
            });
        });
        $(document).on('change', '#cmb_classtype', function () {
            var classtype = $(this).val();
            if (classtype) {
                var headerTitle;
                if (classtype == "OTD") {
                    $(".soe").show();
                    headerTitle = "@Html.Raw(Label.OTD + Label.Assembly + Label.Process + Label.Capacity)";
                    $("div.title").attr("title", function () {
                        return $(this).text($(this).text().replace("@Html.Raw(Label.YTD)", "@Html.Raw(Label.OTD)"));
                    });
                } else if (classtype == "YTD") {
                    $(".soe").hide(); $(".soe").addClass("hidden");
                    headerTitle = "@Html.Raw(Label.YTD + Label.Assembly + Label.Process + Label.Capacity)";
                    $("div.title").attr("title", function () {
                        return $(this).text($(this).text().replace("@Html.Raw(Label.OTD)", "@Html.Raw(Label.YTD)"));
                    });
                }
                var oldLabel = classtype === "OTD" ? '@Html.Raw(Label.YTD)' : '@Html.Raw(Label.OTD)';
                var newLabel = classtype === "OTD" ? '@Html.Raw(Label.OTD)' : '@Html.Raw(Label.YTD)';
                var regex = new RegExp(oldLabel, 'g');
                $('.tablinks').each(function () {
                    $(this).text($(this).text().replace(regex, newLabel));
                });
                $('.header-title').html(headerTitle);
            }
        });
        //json toXlsx
        function exportXlsx(data) {
            const book = XLSX.utils.book_new();
            const sheet = XLSX.utils.json_to_sheet(data);
            XLSX.utils.book_append_sheet(book, sheet);
            XLSX.writeFile(book, 'Export.xlsx');
        }
        //exportXlsx(test_data);
        //图表自适应大小
        var chartIds = ['Tab1', 'Tab2', 'Tab3','Tab4'];
        function echartsautomatic() {
            var charts = [];
            chartIds.forEach(function (chartId) {
                var chart = echarts.init(document.getElementById(chartId));
                charts.push(chart);
            });
            window.onresize = function () {
                charts.forEach(function (chart) {
                    chart.resize();
                });
            };
        }
        $(window).on('resize', function () {
            echartsautomatic();
        });
        /*下拉框*/
        $(function () {
            var projectsele = $("#cmb_proj_code");
            var productcode = $("#cmb_product_code");
            var processsele = $("#cmb_process");
            var pam = {};
            loadData(projectsele, api + '/Assembly/GetProjCode', true);
            projectsele.change(function () {
                pam.proj_code = $(this).val();
                loadData(productcode, api + '/Assembly/GetProductCode', true);
            });
            productcode.change(function () {
                pam.proj_code = $("#cmb_proj_code").val();
                pam.product_code = $(this).val();
                loadData(processsele, api + '/Assembly/GetProcess', true);
            });
            function loadData(selectElement, url, boolean) {
                $.ajax({
                    type: "POST",
                    url: url,
                    data: pam,
                    async: false,
                    dataType: "json",
                    success: function (data) {
                        selectdata = data.ReturnData;
                        selectElement.empty();
                        if (selectdata.length <= 0) {
                            var option = "<option>@Html.Raw(Label.No+Label.Correlation+Label.Data)</option>";
                            selectElement.append(option);
                            return;
                        }
                        if (boolean) {
                            selectElement.append("<option value=''>@Html.Raw(Label.PleaseSelect)...</option>");
                        } else {
                            selectElement.append("<option value='ALL'>@Html.Raw(Label.ALL)</option>");
                        }
                        $.each(selectdata, function (key, value) {
                            selectElement.append($('<option>', {
                                value: value.value,
                                text: value.text
                            }));
                        });
                    }
                });
            }
            $('#cmb_classtype').prop('selectedIndex', 0);
            $("#cmb_prod_type").prop('selectedIndex', 0);
            //$('#cmb_proj_code').prop('selectedIndex', 1).trigger('change');
            $('#cmb_proj_code').val('NCCSAD').trigger('change');
            $('#cmb_product_code').val('TOSA_ADN').trigger('change');
            $('#cmb_process').val('SIOB_BOND_PIC').trigger('change');
        });
        //选中自动查询
        $(document).on('change', '#cmb_classtype,#cmb_prod_type,#cmb_process', function () {
            $(".show_mode").css("display", "none");
            Query();
        });

        /*Tab手动切换*/
        function OpenTab(evt, panle, id, echar_name, itemindex = -1) {
            var i, tablinks;
            tablinks = document.getElementsByClassName(panle)[0].getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace("active", "");
            }
            evt.currentTarget.className += " active";
            //注销eacharts
            let chart = echarts.init(document.getElementById(id));
            chart.dispose();
            /*TabItem 页签滚动*/
            if (itemindex > -1) {
                var listContainer = document.getElementById("listContainer");
                var listItem = listContainer.children[itemindex];
                var scrollContainer = document.getElementById("scrollContainer");
                // 计算要滚动的距离
                var scrollLeft = listItem.offsetLeft - scrollContainer.offsetLeft;
                // 滚动到指定位置
                //scrollContainer.scrollLeft = scrollLeft;
                scrollContainer.scrollTo({
                    left: scrollLeft,
                    behavior: "smooth",
                });
            }
            /*委托事件*/
            echar_name();
            echartsautomatic();
        }
        //Tab页签定时切换
        var Tabtimer;
        function TabInterval() {
            clearInterval(Tabtimer);
            var i = 0;
            function clickButton(buttons) {
                //模拟触发按钮的 onclick 方法
                if (i === buttons.length) {
                    i = 0;
                    Query();
                }
                else {
                    buttons[i].click();
                    i = i + 1;
                }
            }
            /*clickButton();//初始化*/
            //每隔5m执行一次
            Tabtimer = setInterval(function () {
                clickButton($(".tablinks"));
                echartsautomatic();
            }, 10 * 60 * 1000);
        }

        function makeAjaxRequest(url, data) {
            return new Promise(function (resolve, reject) {
                $.ajax({
                    type: "POST",
                    url: api + url,
                    data: data,
                    async: false,
                    dataType: "json",
                    success: function (data) {
                        resolve(data.ReturnData);
                    },
                    error: function (xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        var Tab = {};
        function GetToDayMachineCapacity() {
            var pam = {};
            pam.type = $('#cmb_prod_type').val();
            pam.proj_code = $('#cmb_proj_code').val();
            pam.product_code = $("#cmb_product_code").val();
            pam.process_id = $('#cmb_process').val();
            pam.header_key = $('#cmb_classtype').val();

            var selectedIndex = $('#cmb_process').prop('selectedIndex');
            if (selectedIndex != 0) {
                return makeAjaxRequest("/Assembly/GetAssemblyProdData", pam);
            }
        }
        //查询所有
        var Query = function () {
            Promise.all([GetToDayMachineCapacity()])
                .then(function (data) {
                    //Table1 工序每小时产出
                    //Table2 人员产出
                    //Table3 人员每小时产出
                    //Table4 工单产出
                    //Table5 工单小时
                    //Table6 数据明细
                    //Tables6坏品柏拉图
                    //Tables7defect明细
                    Tab.Tab1 = data[0].Table;
                    Tab.Tab2 = data[0].Table1;
                    Tab.Tab3 = data[0].Table2;
                    Tab.Tab4 = data[0].Table3;
                    Tab.Tab5 = data[0].Table4;
                    Tab.Tab6 = data[0].Table5;
                    Tab.Tab7 = data[0].Table6;
                    Tab.Tab8 = data[0].Table7;
                    process_hour_prod_Chart();
                    operator_prod_Chart();
                    job_num_prod_Chart();
                    failDefectPlatoChart();
                    //echartsautomatic();
                })
                .catch(function (error) {
                });
            TabInterval();
        }

        $('.mode_close').click(function () {
            $(".show_mode").css("display", "none");
            $(".contentdetail").empty();
            $(".contentdetail div").remove();
        });

        /*导出生产数据*/
        var AssemblyDataExport = function (type) {
            $('#btn_query').prop('disabled', true);
            ExportType = type;
            var formData = new FormData();
            formData.append('type', ExportType);
            formData.append('cl_type', $('#cmb_classtype').val());
            formData.append('prodtype', $('#cmb_prod_type').val());
            formData.append('proj_code', $('#cmb_proj_code').val());
            formData.append('product_code', $('#cmb_product_code').val());
            formData.append('process_id', $('#cmb_process').val());
            var url = api + "/Assembly/GetAssemblyExport";
            PostExportToExcel(url, formData);
            alert("数据量过大。。。\n\n正在加速下载，请等待2分钟^_^");
        }

        //POST 参数不固定 导出
        var PostExportToExcel = function (url, formData) {
            //GET: var url = "http://localhost:44304/Dashboard/ExportToExcel?" + $.param(pam);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.responseType = 'blob';
            xhr.onload = function () {
                if (xhr.status === 200) {
                    $('#btn_query').prop('disabled', false);
                    var url = window.URL.createObjectURL(xhr.response);
                    var a = document.createElement('a');
                    a.href = url;
                    a.download = ExportType.toLocaleUpperCase() + '.xlsx';
                    a.click();
                    window.URL.revokeObjectURL(url);
                }
            };
            xhr.send(formData);
        }

        /*图表随机颜色*/
        function getRandomColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return '' + r + ',' + g + ',' + b + '';
        }
        var colors = ['0, 0, 255', '255, 165, 0', '255, 255, 0', '128, 0, 128', '0, 255, 255', '255, 0, 255', '0, 128, 0', '255, 192, 203', '255, 69, 0', '255, 20, 147', '0, 255, 127'];

        function updateChartOnChange() {
            dev_hour_test_time_vaule_Chart.updateChart();
        }
        $('#tester-dropdown').change(updateChartOnChange);
        $('#item-dropdown').change(updateChartOnChange);

        //1工序产出
        var process_hour_prod_Chart = function () {
            var chartDom = document.getElementById("Tab1");
            if (chartDom) {
                echarts.dispose(chartDom);
            }
            var myChart = echarts.init(chartDom);
            var data = Tab.Tab1;
            // 定义X轴和两个Y轴的数据
            var x_DataHour = data.map(function (item) {
                return parseInt(item.HOUR);
            });
            var yield = data.map(function (item) {
                return item ? (item.PASS / item.INPUT) * 100 : 0;
            });
            var pass = data.map(function (item) {
                return item ? item.PASS : 0;
            });
            var fail = data.map(function (item) {
                return item ? item.FAIL : 0;
            });
            var target = data.map(function (item) {
                return item ? item.TARGET : 0;
            });
            var y_DataTarget = data.map(function (item) {
                return item ? item.TARGET : 0;
            });
            var maxInteger = Math.ceil(Math.max.apply(null, y_DataTarget));
            var vaulemax = Math.max.apply(null, pass);
            // 配置图表选项
            var option = {
                label: {
                    show: true,
                    color: 'white',
                    fontSize: '0.12rem',
                    fontWeight: 'bold'
                },
                textStyle: {
                    color: '#fff',
                    fontSize: '0.16rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        const order = ['TARGET', 'PASS','FAIL'];
                        let tooltipString = params
                            .sort((a, b) => order.indexOf(a.seriesName) - order.indexOf(b.seriesName))
                            .map(p => `${p.marker} ${p.seriesName}:${Math.round(p.value ? p.value:0)}<br/>`)
                            .join('');
                        return tooltipString;
                    },
                    textStyle: {
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: 'white'
                        }
                    }
                },
                grid: {
                    top: '10%',
                    left: '5%',
                    bottom: '12%',
                    width: '92%'
                },
                color: ['#FF3374', '#07C160'],
                legend: {
                    data: ['TARGET', 'PASS', 'FAIL'],
                    width: '100%',
                    itemGap: 20,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.16rem'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: x_DataHour.map(item => item + ':00'),
                    axisLabel: {
                        show: true,
                        interval: 0,
                        rotate: 45,
                        color: '#fff',
                        fontSize: '0.16rem'
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    scale: true,
                    splitLine: { show: false },
                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        show: true
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.16rem'
                        }
                    }
                },
                series: [
                    {
                        name: 'TARGET',
                        type: 'line',
                        yAxisIndex: 0,
                        zlevel: 0,
                        data: target.map(item => parseInt(item) > 0 ? item : null),
                        smooth: true, lineStyle: { normal: { width: 3 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(3, 194, 236, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(3, 194, 236, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#03C2EC' } },
                        label: {
                            normal: {
                                show: true,
                                color: '#03BFE9'
                            }
                        }
                    },
                    {
                        name: 'FAIL',
                        type: 'bar',
                        stack: 'stack1',
                        zlevel: 1,
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        data: fail.map(item => parseInt(item) > 0 ? item : null),
                        itemStyle: {
                            normal: {
                                color: '#FF3374',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        name: 'PASS',
                        type: 'bar',
                        stack: 'stack1',
                        zlevel: 1,
                        data: pass.map(item => parseInt(item) > 0 ? item : null),
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: '#07C160',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            myChart.off('click');
            myChart.on('click', function (params) {
               Detail_prod_opdev_table_Chart();
            });
        }

        //2人员产出
        var operator_prod_Chart = function () {
            var chartDom = document.getElementById("Tab3");
            if (chartDom) {
                echarts.dispose(chartDom);
            }
            var myChart = echarts.init(chartDom);
            // 定义X轴和两个Y轴的数据
            var data = Tab.Tab2;
            var x_operator = data.map(function (item) {
                return item.OPERATOR;
            });
            var InputData = data.map(function (item) {
                return item ? item.INPUT : 0;
            });
            var pass = data.map(function (item) {
                return item ? item.PASS : 0;
            });
            var fail = data.map(function (item) {
                return item ? item.FAIL : 0;
            });
            var yield = data.map(function (item) {
                return item ? item.YIELD : 0;
            });
            var target = data.map(function (item) {
                return item ? item.TARGET_VALUE : 0;
            });
            var vaulemax = Math.max.apply(null, InputData);
            var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
            // 配置图表选项
            var option = {
                label: {
                    show: true,
                    color: 'white',
                    fontSize: '0.12rem',
                    fontWeight: 'bold'
                },
                textStyle: {
                    fontSize: '0.1rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        const order = ['TARGET', 'YIELD', 'PASS','FAIL'];
                        let tooltipString = params
                            .sort((a, b) => order.indexOf(a.seriesName) - order.indexOf(b.seriesName))
                            .map(p => `${p.marker} ${p.seriesName}:${Math.round(p.value ? p.value : 0)}<br/>`)
                            .join('');
                        return tooltipString;
                    },
                    textStyle: {
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: 'white'
                        }
                    }
                },
                grid: {
                    top: '10%',
                    left: '5%',
                    bottom: '12%',
                    width: '90%'
                },
                color: ['#FF3374','#07C160'],
                legend: {
                    data: ['TARGET', 'YIELD', 'PASS', 'FAIL'],
                    width: '100%',
                    itemGap: 20,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.16rem'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: x_operator,
                    axisLabel: {
                        show: true,
                        interval: 0,
                        rotate: 45,
                        color: '#fff',
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        max: yAxismax + (yAxismax/5),
                        interval: Math.ceil((yAxismax + (yAxismax / 5)) / 6),
                        scale: true,
                        splitLine: { show: false },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize: '0.16rem'
                            }
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        max: 120,
                        interval: 20,
                        scale: true,
                        splitLine: { show: false },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            formatter: function (value) {
                                return value + '%';
                            },
                            textStyle: {
                                color: '#fff',
                                fontSize: '0.16rem'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: 'TARGET',
                        type: 'line',
                        yAxisIndex: 0,
                        zlevel: 0,
                        data: target.map(item => parseInt(item) > 0 ? item : null),
                        lineStyle: { normal: { width: 3 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(3, 194, 236, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(3, 194, 236, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#03C2EC' } },
                        label: {
                            normal: {
                                show: true,
                                color: '#03BFE9'
                            }
                        }
                    },
                    {
                        name: 'YIELD',
                        type: 'line',
                        yAxisIndex: 1,
                        zlevel: 1,
                        data: yield.map(item => parseInt(item) > 0 ? item : 0),
                        lineStyle: { normal: { width: 3 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(237, 178, 23, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(237, 178, 23, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#edb217 ' } },
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: function (params) {return params.value + '%';},
                                color: '#E1AB19'
                            }
                        }
                    },
                    {
                        name: 'FAIL',
                        type: 'bar',
                        stack: 'stack1',
                        yAxisIndex: 0,
                        zlevel: 2,
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        data: fail.map(item => parseInt(item) > 0 ? item : null),
                        itemStyle: {
                            normal: {
                                color: '#FF3374',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        name: 'PASS',
                        type: 'bar',
                        stack: 'stack1',
                        yAxisIndex: 0,
                        zlevel: 2,
                        data: pass.map(item => parseInt(item) > 0 ? item : null),
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: '#07C160',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            var sparkletimer = setInterval(changeColor, 1000);
            function targetgaugeinput(operator) {
                const item = data.find(item => item.OPERATOR === operator);
                const targetValue = item ? item.TARGET_VALUE : 0;
                const inputValue = item ? item.INPUT : 0;
                return inputValue >= targetValue;
            }
            var type = 0;
            function changeColor() {
                option.series[2].itemStyle = {
                    normal: {
                        color: function (params) {
                            return (type === 0 || targetgaugeinput(params.name)) ? '#FF3374' : 'rgba(0,0,0,0)';
                        }
                    }
                };
                option.series[3].itemStyle = {
                    normal: {
                        barBorderRadius: [10, 10, 0, 0],
                        color: function (params) {
                            return (type === 0 || targetgaugeinput(params.name)) ? '#07C160' : 'rgba(0,0,0,0)';
                        }
                    }
                };
                type = 1 - type;
                myChart.setOption(option, false);
                //clearInterval(sparkletimer);
                myChart.off('click');
                myChart.on('click', function (params) {
                    Detail_OperatorHourOutput_Chart(params.name);
                });
            }
            @*tools.loopShowTooltip(echarts.init(chart), option, { loopSeries: true });*@

        };

        //3工单产出
        var job_num_prod_Chart = function () {
            var chartDom = document.getElementById("Tab2");
            if (chartDom) {
                echarts.dispose(chartDom);
            }
            var myChart = echarts.init(chartDom);
            // 汇总数据
            const summary = Tab.Tab4.reduce((acc, { PROCESS_ID, JOB_NUM, INPUT, PASS, FAIL }) => {
                const key = `${PROCESS_ID}_${JOB_NUM}`;
                if (!acc[key]) {
                    acc[key] = { PROCESS_ID, JOB_NUM, INPUT: 0, PASS: 0, FAIL: 0 };
                }
                acc[key].INPUT += INPUT;
                acc[key].PASS += PASS;
                acc[key].FAIL += FAIL;
                return acc;
            }, {});
            //并按 INPUT 排序
            const data = Object.values(summary).sort((a, b) => a.INPUT - b.INPUT);
            var yAxisData = data.map(function (item) {
                return item.JOB_NUM;
            });
            var legendData = ['PASS', 'FAIL'];
            var seriesData = data.map(function (item) {
                return [item.PASS, item.FAIL];
            });
            var option = {
                textStyle: {
                    color: '#fff',
                    fontSize: '0.14rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    textStyle: {
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'shadow',
                        crossStyle: {
                            color: 'white'
                        }
                    }
                },
                legend: {
                    show: true,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.16rem'
                    },
                    data: legendData
                },
                grid: {
                    top: '10%',
                    left: '13%',
                    right: '2%',
                    bottom: '10%',
                    width: '84%',
                },
                xAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: true
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.14rem'
                        },
                        show: true
                    },
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'category',
                    data: yAxisData,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.12rem',
                            fontWeight: 'bolder',
                        },
                        show: true
                    }
                },
                series: [
                    {
                        name: 'PASS',
                        type: 'bar',
                        stack: 'total',
                        barGap: '2%',
                        label: {
                            show: true,
                            color: 'white'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            normal: {
                                color: '#07C160'
                            }
                        },
                        data: seriesData.map(function (item) {
                            return parseInt(item[0]) > 0 ? item[0] : null;
                        })
                    },
                    {
                        name: 'FAIL',
                        type: 'bar',
                        stack: 'total',
                        barGap: '2%',
                        label: {
                            show: true,
                            color: 'white'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            normal: {
                                color: '#FF3374'
                            }
                        },
                        data: seriesData.map(function (item) {
                            return parseInt(item[1]) > 0 ? item[1] : null;
                        })
                    }
                ]
            };
            myChart.setOption(option, false);
            myChart.off('click');
            myChart.on('click', function (params) {
                job_num_hour_prod_Chart(params.name);
            });
            myChart.setOption(option);
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }

        //4 坏品柏拉图
        var defect_optionloop;
        function failDefectPlatoChart() {
            var chartDom = document.getElementById("Tab4");
            if (chartDom) {
                echarts.dispose(chartDom);
            }
            var xAxisData = Tab.Tab7.map(function (item) {
                return item.DEFECT_ITME;
            });
            var fail = Tab.Tab7.map(function (item) {
                return item ? item.DEFECT_QTY : 0;
            });
            var yield = Tab.Tab7.map(function (item) {
                return item ? item.PLATO_VAULE : 0;
            });

            var cumulativeSum = 0;
            var cumulativePercent = yield.map(function (item) {
                cumulativeSum += item;
                return cumulativeSum.toFixed(2);
            });
            var myChart = echarts.init(chartDom);
            var option = {
                textStyle: {
                    color: 'white',
                    fontSize: '0.14rem'
                },
                label: {
                    show: true,
                    color: 'white',
                    fontSize: '0.12rem',
                    fontWeight: 'bold'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    textStyle: {
                        fontSize: '0.12rem',
                        align: 'left'
                    },
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: ['FAIL', 'FailRate', 'TotalRate'],
                    width: '100%',
                    itemGap: 10,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: 'white',
                        fontSize: '0.16rem'
                    }
                },
                grid: {
                    top: '10%',
                    left: '2%',
                    right: '2%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis:
                {
                    yAxisIndex: 9,
                    type: 'category',
                    data: xAxisData,
                    textStyle: {
                        color: 'white',
                        fontSize: '0.12rem'
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                        textStyle: {
                            color: 'white',
                            fontSize: '0.12rem'
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        splitLine: { show: false },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: 'white',
                                fontSize: '0.14rem',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        max: 120,
                        interval: 20,
                        scale: true,
                        splitLine: { show: false },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            formatter: function (value) {
                                return value + '%';
                            },
                            textStyle: {
                                color: 'white',
                                fontSize: '0.14rem',
                                fontWeight: 'bold'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: 'FAIL',
                        type: 'bar',
                        yAxisIndex: 0,
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        data: fail.map(item => parseInt(item) > 0 ? item : null),
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#ff99b9"
                                }, {
                                    offset: 0.8,
                                    color: "#ff0051"
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        name: 'FailRate',
                        type: 'line',
                        yAxisIndex: 1,
                        zlevel: 0,
                        data: yield.map(item => parseInt(item) > 0 ? item : 0),
                        lineStyle: { normal: { width: 2 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(237, 178, 23, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(237, 178, 23, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 10
                            }
                        },
                        itemStyle: { normal: { color: '#EDB217 ' } },
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: function (params) { return params.value + '%'; },
                                color: '#E1AB19'
                            }
                        }
                    },
                    {
                        name: 'TotalRate',
                        type: 'line',
                        yAxisIndex: 1,
                        zlevel: 0,
                        data: cumulativePercent,
                        lineStyle: { normal: { width: 3 } },
                        itemStyle: { normal: { color: '#00C598 ' } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                    [
                                        { offset: 0, color: 'rgba(0, 197, 152, 0.5)' },
                                        { offset: 0.8, color: 'rgba(0, 197, 152, 0.1)' }
                                    ], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: function (params) { return params.value + '%'; },
                                color: '#33FFD0'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option, false);
            myChart.off('click');
            myChart.on('click', function (params) {
                failDefectChart();
            });
            window.addEventListener('resize', function () {
                myChart.resize();
            });
            if (defect_optionloop) {
                //defect_optionloop.clearLoop();
                defect_optionloop = null;
            }
            defect_optionloop = tools.loopShowTooltip(myChart, option, { loopSeries: true });
        };

        /*下钻*/
        //1工序产出明细
        var Detail_prod_opdev_table_Chart = function () {
            $(".contentdetail").empty();
            /*工序每小时详细产出*/
            var tod_prod_data = [];
            $.each(Tab.Tab1, function (index, item) {
                if (item.STATE == 'Y') {
                    var newItem = {
                        PROCESS_ID: item.PROCESS_ID,
                        DAY: item.DAY,
                        HOUR: parseInt(item.HOUR),
                        INPUT: parseInt(item.TOD_INPUT),
                        PASS: parseInt(item.TOD_PASS),
                        FAIL: parseInt(item.TOD_FAIL),
                        YIELD: parseInt(item.TOD_PASS) > 0 ? (parseInt(item.TOD_PASS) / parseInt(item.TOD_INPUT) * 100) : 0
                    };
                    tod_prod_data.push(newItem);
                }
            });
            //动态生成表头
            var tod_prod_header = "";
            var tod_prod_header_keys = Object.keys(tod_prod_data[0]);
            tod_prod_header_keys.forEach(function (header) {
                tod_prod_header = tod_prod_header + '<th>' + header + '</th>';
            });
            // OPERATOR汇总
            var tod_prod_hour = $.map(tod_prod_data, function (item) {
                return parseInt(item.HOUR);
            });
            var tod_prod_hour_unique = $.unique(tod_prod_hour);
            var count_tod_prod_hour = tod_prod_hour_unique.length;
            //生成表体内容
            var tod_input = 0;
            var tod_pass = 0;
            var tod_fail = 0;
            var tod_tabtbody = '';
            tod_prod_data.forEach(function (row, index) {
                index++;
                var tod_prod_tdbody = '';
                tod_prod_header_keys.forEach(function (header, columnindex) {
                    if (header === "INPUT") {
                        tod_input = tod_input + parseInt(row[header]);
                    }
                    if (header === "PASS") {
                        tod_pass = tod_pass + parseInt(row[header]);
                    }
                    if (header === "FAIL") {
                        tod_fail = tod_fail + parseInt(row[header]);
                    }
                    if (header === "YIELD") {
                        row[header] = parseInt(row[header]).toFixed(2) + '%';
                    }
                    tod_prod_tdbody = tod_prod_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${header == "DAY" ? row[header].replace(/\T/g, '&emsp;') : row[header]}</td>`;
                });
                var tod_prod_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${tod_prod_tdbody}</tr>`;
                tod_tabtbody = tod_tabtbody + tod_prod_trbody;
            });
            var tod_prod_tab_html = `
            <div style="height:50%;" ><label>${tod_prod_data[0].PROCESS_ID}工序小时产出</label>
                <div id="tod_prod" class="tod_prod detail" style="height: 4.7rem;"></div>
            </div>
            <div style="height:50%;"><label>${tod_prod_data[0].PROCESS_ID}工序小时产出列表</label>
                <div id="tester_table" class="tester_hour opdev detail" style="height: 4.7rem;">
                    <table id="myTable" class="DataSheet" border="1" style="color:black;width:100%;height:100%">
                        <thead><tr>${tod_prod_header}</tr></thead>
                        <tbody id="yield_tbody">${tod_tabtbody}</tbody>
                        <tfoot><tr><td></td><td>生产小时:${count_tod_prod_hour}</td><td></td><td>${tod_input}</td><td>${tod_pass}</td><td>${tod_fail}</td><td>${(tod_pass > 0 ? (tod_pass / tod_input * 100) : 0).toFixed(2) + '%'}</td></tr></tfoot>
                    </table>
                </div>
            </div>`;
            /*工序每小时详细产出Chart*/
            var prodHourOutputChart = function () {
                var xAxisData = tod_prod_data.map(function (item) {
                    return parseInt(item.HOUR);
                });
                var pass = tod_prod_data.map(function (item) {
                    return item ? item.PASS : 0;
                });
                var fail = tod_prod_data.map(function (item) {
                    return item ? item.FAIL : 0;
                });
                var yield = tod_prod_data.map(function (item) {
                    return parseInt(item.YIELD.replace(/\%/g, ''));
                });
                var InputData = tod_prod_data.map(function (item) {
                    return item ? item.INPUT : 0;
                });
                var vaulemax = Math.max.apply(null, InputData);
                var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
                var chartDom = document.getElementById("tod_prod");
                if (chartDom) {
                    echarts.dispose(chartDom);
                }
                var myChart = echarts.init(chartDom);
                var options = {
                    label: {
                        show: true,
                        color: 'white',
                        fontSize: '0.12rem',
                        fontWeight: 'bold'
                    },
                    textStyle: {
                        fontSize: '0.1rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.12rem',
                            align: 'left'
                        },
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: ['PASS','FAIL', 'YIELD'],
                        width: '100%',
                        itemGap: 10,
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            fontSize: '0.12rem'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis:
                    {
                        yAxisIndex: 9,
                        type: 'category',
                        data: xAxisData.map(item =>item+":00"),
                        textStyle: {
                            fontSize: '0.12rem'
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            textStyle: {
                                fontSize: '0.12rem'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            max: yAxismax + (yAxismax / 5),
                            interval: Math.ceil((yAxismax + (yAxismax / 5)) / 6),
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 0,
                            max: 120,
                            interval: 20,
                            scale: true,//刻度范围一致
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                formatter: function (value) {
                                    return value + '%';
                                },
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            data: fail.map(item => parseInt(item) > 0 ? item : null),
                            name: 'FAIL',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    color: '#FF3374',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            data: pass.map(item => parseInt(item) > 0 ? item : null),
                            name: 'PASS',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],
                                    color: '#07C160',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            name: 'YIELD',
                            type: 'line',
                            yAxisIndex: 1,
                            zlevel: 0,
                            data: yield.map(item => parseInt(item) > 0 ? item : 0),
                            lineStyle: { normal: { width: 3 } },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(237, 178, 23, 0.5)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(237, 178, 23, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 12
                                }
                            },
                            itemStyle: { normal: { color: '#EDB217 ' } },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    formatter: function (params) { return params.value + '%'; },
                                    color: '#E1AB19'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(options);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }

            /*人机 table*/
            var opdev_data = [];
            var opdev_tabdata = Tab.Tab3.map(function (item) {
                var newItem = {
                    PROCESS_ID: item.PROCESS_ID,
                    OPERATOR: item.OPERATOR,
                    DAY: item.DAY,
                    HOUR: item.HOUR,
                    INPUT: parseInt(item.INPUT),
                    PASS: parseInt(item.PASS),
                    FAIL: parseInt(item.FAIL),
                    YIELD: (parseInt(item.PASS) > 0 ? parseInt(item.PASS) / parseInt(item.INPUT) * 100 : 0)
                };
                opdev_data.push(newItem);
            });
            //动态生成表头
            var opdev_header = "";
            var opdev_header_keys = Object.keys(opdev_data[0]);
            opdev_header_keys.forEach(function (header) {
                opdev_header = opdev_header + '<th>' + header + '</th>';
            });
            //生成表体内容
            var opdev_sum_input = 0;
            var opdev_sum_pass = 0;
            var opdev_sum_fail = 0;
            var opdev_tabtbody = '';
            opdev_data.forEach(function (row, index) {
                index++;
                var opdev_tdbody = '';
                opdev_header_keys.forEach(function (header, columnindex) {
                    if (header === "INPUT") {
                        opdev_sum_input = opdev_sum_input + parseInt(row[header]);
                    }
                    if (header === "PASS") {
                        opdev_sum_pass = opdev_sum_pass + parseInt(row[header]);
                    }
                    if (header === "FAIL") {
                        opdev_sum_fail = opdev_sum_fail + parseInt(row[header]);
                    }
                    if (header === "YIELD") {
                        row[header] = parseInt(row[header]).toFixed(2) + '%';
                    }
                    opdev_tdbody = opdev_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${header == "DAY" ? row[header].replace(/\T/g, '&emsp;') : row[header]}</td>`;
                });
                var opdev_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${opdev_tdbody}</tr>`;
                opdev_tabtbody = opdev_tabtbody + opdev_trbody;
            });
            var opdev_tab_html = `
            <div style="height:50%;"><label>${opdev_data[0].PROCESS_ID}工序人员小时生产趋势图</label>
                <div id="devhour" class="devhour detail" style="height: 4.7rem;"></div>
            </div>
            <div style="height:50%;"><label>${opdev_data[0].PROCESS_ID}工序人员小时生产列表</label>
                <div id="tester_table" class="tester_hour opdev detail" style="height: 4.7rem;">
                    <table id="myTable" class="DataSheet" border="1" style="color:black;width:100%;height:100%">
                        <thead><tr>${opdev_header}</tr></thead>
                        <tbody id="yield_tbody">${opdev_tabtbody}</tbody>
                        <tfoot><tr><td></td><td></td><td></td><td></td><td>${opdev_sum_input}</td><td>${opdev_sum_pass}</td><td>${opdev_sum_fail}</td><td>${(opdev_sum_input > 0 ? (opdev_sum_pass / opdev_sum_input * 100) : 0).toFixed(2) + '%'}</td></tr></tfoot>
                    </table>
                </div>
            </div>`;
            /*人员小时产出Chart*/
            var op_hourChart = function () {
                var ophour_data = Tab.Tab3;
                var chartDom = document.getElementById("devhour");
                if (chartDom) {
                    echarts.dispose(chartDom);
                }
                var myChart = echarts.init(chartDom);
                // 获取所有不重复的tester值
                var operator = Array.from(new Set(ophour_data.map(item => item.OPERATOR)));
                // 获取所有不重复的HOUR值
                var hours = Array.from(new Set(ophour_data.map(item => parseInt(item.HOUR))));
                // 根据tester和HOUR生成series数据
                var seriesData = operator.map(operator => {
                    return {
                        name: operator,
                        type: 'line',
                        data: hours.map(hour => {
                            var item = ophour_data.find(d => d.OPERATOR === operator && d.HOUR === hour);
                            return item ? item.INPUT : 0;
                        })
                    };
                });
                var option = {
                    textStyle: {
                        color: 'black',
                        fontSize: '0.16rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.14rem'
                        },
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: 'black'
                            }
                        }
                    },
                    legend: {
                        show: true,
                        width: '100%',
                        type: 'scroll',
                        data: operator,
                        orient: 'horizontal',
                        itemWidth: 10,
                        itemHeight: 10,
                        scrollDataIndex: 0,
                        pageIconSize: [12, 12],
                        pageIconColor: '#666',
                        pageTextStyle: {
                            fontSize: '0.16rem',
                            color: 'black'
                        },
                        textStyle: {
                            color: 'black',
                            fontSize: '0.16rem'
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '5%',
                        right: '1%',
                        bottom: '17%',
                        width: '93%'
                    },
                    xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: hours.map(function (item) {
                            return item + ':00';
                        }),
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: 'black',
                                fontSize: '0.14rem'
                            },
                            show: true
                        },
                        splitLine: {show: false}
                        },
                        {
                            data: ["白班", "晚班"],
                            axisLabel: { interval: 0 },
                            position: 'bottom',
                            offset: 20,
                            //axisTick: { show: false },
                            //axisLine: { show: false }
                        }
                    ],
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: 'black',
                                fontSize: '0.14rem'
                            },
                            show: true
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    series: seriesData.map(function (data, index) {
                        var color = colors[index % colors.length];
                        return {
                            name: data.name,
                            type: 'line',
                            data: data.data,
                            lineStyle: {
                                normal: {
                                    width: 2
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'rgb(' + color + ')'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(' + color + ',0.2)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgb(' + color + ',0.1)'
                                    }], false),
                                    shadowColor: 'rgb(' + color + ',0.1)',
                                    shadowBlur: 12
                                }
                            }
                        };
                    })
                };
                myChart.setOption(option);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }

            $(".contentdetail").append(tod_prod_tab_html + opdev_tab_html);
            $(".show_mode").css("display", "block");
            prodHourOutputChart();
            op_hourChart();
        }

        //2员工产出明细
        var Detail_OperatorHourOutput_Chart = function (operator) {
            $(".contentdetail").empty();
            /*某员工每小时产出*/
            var op_hour_data = [];
            $.each(Tab.Tab3, function (index, item) {
                if (item.OPERATOR == operator) {
                    var newItem = {
                        PROCESS_ID: item.PROCESS_ID,
                        OPERATOR: item.OPERATOR,
                        DAY: item.DAY,
                        HOUR: parseInt(item.HOUR),
                        INPUT: parseInt(item.INPUT),
                        PASS: parseInt(item.PASS),
                        FAIL: parseInt(item.FAIL),
                        YIELD: parseInt(item.PASS) > 0 ? (parseInt(item.PASS) / parseInt(item.INPUT) * 100) : 0
                    };
                    op_hour_data.push(newItem);
                }
            });
            //动态生成表头
            var operator_hour_header = "";
            var operator_hour_header_keys = Object.keys(op_hour_data[0]);
            operator_hour_header_keys.forEach(function (header) {
                operator_hour_header = operator_hour_header + '<th>' + header + '</th>';
            });
            //HOUR汇总
            var operator_hour = $.map(op_hour_data, function (item) {
                return (parseInt(item.INPUT) > 0) == true ? parseInt(item.HOUR) : 0;
            });
            var operator_hour_unique = $.unique(operator_hour);
            var count_operator_hour = operator_hour_unique.length;
            //生成表体内容
            var operator_hour_input = 0;
            var operator_hour_pass = 0;
            var operator_hour_abort = 0;
            var operator_hour_fail = 0;
            var operator_hour_tabtbody = '';
            op_hour_data.forEach(function (row, index) {
                index++;
                var operator_hour_tdbody = '';
                operator_hour_header_keys.forEach(function (header, columnindex) {
                    if (header === "INPUT") {
                        operator_hour_input = operator_hour_input + parseInt(row[header]);
                    }
                    if (header === "PASS") {
                        operator_hour_pass = operator_hour_pass + parseInt(row[header]);
                    }
                    if (header === "FAIL") {
                        operator_hour_fail = operator_hour_fail + parseInt(row[header]);
                    }
                    if (header === "YIELD") {
                        row[header] = parseInt(row[header]).toFixed(2) + '%';
                    }
                    operator_hour_tdbody = operator_hour_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${header == "DAY" ? row[header].replace(/\T/g, '&emsp;') : row[header]}</td>`;
                });
                var operator_hour_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${operator_hour_tdbody}</tr>`;
                operator_hour_tabtbody = operator_hour_tabtbody + operator_hour_trbody;
            });
            var operator_hour_tdbody_tab_html = `
            <div style="width:100%;height:50%;"><label>员工${operator}小时产出</label>
                <div id="operator_hour" class="operator_hour detail" style="height: 4.7rem;"></div>
            </div>
            <div style="width:100%;height:50%;"><label>员工${operator}小时产出列表</label>
                <div id="tester_table" class="operator_hour opdev detail" style="height: 4.7rem;">
                    <table id="myTable" class="DataSheet" border="1" style="color:black;width: 100%; height: 100%;">
                        <thead><tr>${operator_hour_header}</tr></thead>
                        <tbody id="yield_tbody">${operator_hour_tabtbody}</tbody>
                        <tfoot><tr><td></td><td></td><td>生产小时:${count_operator_hour}</td><td></td><td>${operator_hour_input}</td><td>${operator_hour_pass}</td><td>${operator_hour_fail}</td><td>${(operator_hour_pass > 0 ? (operator_hour_pass / operator_hour_input * 100) : 0).toFixed(2) + '%'}</td></tr></tfoot>
                    </table>
                </div>
            </div>`;
            //某员工每小时产出Chart
            var OperatorhouroutputChart = function (operator) {
                var data = [];
                $.each(Tab.Tab3, function (index, item) {
                    if (item.OPERATOR == operator) {
                        var newItem = {
                            PROCESS_ID: item.PROCESS_ID,
                            OPERATOR: item.OPERATOR,
                            DAY: item.DAY,
                            HOUR: parseInt(item.HOUR),
                            INPUT: parseInt(item.INPUT),
                            PASS: parseInt(item.PASS),
                            FAIL: parseInt(item.FAIL),
                            YIELD: parseInt(item.PASS) > 0 ? (parseInt(item.PASS) / parseInt(item.INPUT) * 100) : 0
                        };
                        data.push(newItem);
                    }
                });
                var xAxis_Data = data.map(function (item) {
                    return item ? parseInt(item.HOUR) : 0;
                });
                var pass = data.map(function (item) {
                    return item ? parseInt(item.PASS) : 0;
                });
                var fail = data.map(function (item) {
                    return item ? parseInt(item.FAIL) : 0;
                });
                var yield = data.map(function (item) {
                    return item ? parseInt(item.YIELD) : 0;
                });
                var InputData = data.map(function (item) {
                    return item ? item.INPUT : 0;
                });
                var vaulemax = Math.max.apply(null, InputData);
                var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
                var chartDom = document.getElementById("operator_hour");
                if (chartDom) {
                    echarts.dispose(chartDom);
                }
                var myChart = echarts.init(chartDom);
                var options = {
                    label: {
                        show: true,
                        color: 'white',
                        fontSize: '0.12rem',
                        fontWeight: 'bold'
                    },
                    title: {
                        text: operator,
                        textStyle: {
                            fontSize: '0.14rem',
                            textAlign: 'center'
                        }
                    },
                    textStyle: {
                        fontSize: '0.1rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.12rem',
                            align: 'left'
                        },
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: ['PASS', 'FAIL', 'YIELD'],
                        width: '100%',
                        itemGap: 10,
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            fontSize: '0.12rem'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis:
                    {
                        yAxisIndex: 9,
                        type: 'category',
                        data: xAxis_Data.map(item => item + ':00'),
                        textStyle: {
                            fontSize: '0.12rem'
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            textStyle: {
                                fontSize: '0.12rem'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            max: yAxismax + (yAxismax / 5),
                            interval: Math.ceil((yAxismax + (yAxismax / 5)) / 6),
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 0,
                            max: 120,
                            interval: 20,
                            scale: true,//刻度范围一致
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                formatter: function (value) {
                                    return value + '%';
                                },
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            data: fail.map(item => parseInt(item) > 0 ? item : null),
                            name: 'FAIL',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    color: '#FF3374',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            data: pass.map(item => parseInt(item) > 0 ? item : null),
                            name: 'PASS',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],
                                    color: '#07C160',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            name: 'YIELD',
                            type: 'line',
                            yAxisIndex: 1,
                            zlevel: 0,
                            data: yield.map(item => parseInt(item) > 0 ? item : 0),
                            lineStyle: { normal: { width: 3 } },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(237, 178, 23, 0.5)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(237, 178, 23, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 12
                                }
                            },
                            itemStyle: { normal: { color: '#EDB217 ' } },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    formatter: function (params) { return params.value + '%'; },
                                    color: '#E1AB19'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(options);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }

            $(".contentdetail").append(operator_hour_tdbody_tab_html);
            $(".show_mode").css("display", "block");
            OperatorhouroutputChart(operator);

        }

        //3工单产出明细
        var job_num_hour_prod_Chart = function (job_num) {
            $(".contentdetail").empty();
            /*某员工每小时产出*/
            var job_num_hour_data = Tab.Tab6.filter(function (item) {
                return item.JOB_NUM == job_num;
            });
            //动态生成表头
            var job_num_hour_header = "";
            var job_num_hour_header_keys = Object.keys(job_num_hour_data[0]);
            job_num_hour_header_keys.forEach(function (header) {
                job_num_hour_header = job_num_hour_header + '<th>' + header + '</th>';
            });
            //生成表体内容
            var job_num_hour_input = 0;
            var job_num_hour_pass = 0;
            var job_num_hour_fail = 0;
            var job_num_hour_tabtbody = '';
            job_num_hour_data.forEach(function (row, index) {
                index++;
                var job_num_hour_tdbody = '';
                job_num_hour_header_keys.forEach(function (header, columnindex) {
                    if (header === "INPUT") {
                        job_num_hour_input = job_num_hour_input + parseInt(row[header]);
                    }
                    if (header === "PASS") {
                        job_num_hour_pass = job_num_hour_pass + parseInt(row[header]);
                    }
                    if (header === "FAIL") {
                        job_num_hour_fail = job_num_hour_fail + parseInt(row[header]);
                    }
                    if (header === "YIELD") {
                        row[header] = parseInt(row[header]).toFixed(2) + '%';
                    }
                    if (header === "START_TIME") {
                        row[header] = row[header].replace(/\T/g, '&emsp;');
                    }
                    if (header === "TEST_TIME") {
                        row[header] = row[header].replace(/\T/g, '&emsp;');
                    }
                    job_num_hour_tdbody = job_num_hour_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${row[header]}</td>`;
                });
                var job_num_hour_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${job_num_hour_tdbody}</tr>`;
                job_num_hour_tabtbody = job_num_hour_tabtbody + job_num_hour_trbody;
            });
            var job_num_hour_tdbody_tab_html = `
            <div style="width:100%;height:50%;"><label>工单${job_num}小时产出</label>
                <div id="job_num_hour" class="job_num_hour detail" style="height: 4.7rem;"></div>
            </div>
            <div style="width:100%;height:50%;"><label>工单${job_num}数据明细</label>
                <div id="tester_table" class="job_num_hour opdev detail" style="height: 4.7rem;">
                    <table id="myTable" class="DataSheet" border="1" style="color:black;width: 100%; height: 100%;">
                        <thead><tr>${job_num_hour_header}</tr></thead>
                        <tbody id="yield_tbody">${job_num_hour_tabtbody}</tbody>
                        <tfoot><tr><td></td><td></td><td></td><td></td><td></td><td><td></td><td></td><td></td></td><td>${job_num_hour_input}</td><td>${job_num_hour_pass}</td><td>${job_num_hour_fail}</td><td>${(job_num_hour_pass > 0 ? (job_num_hour_pass / job_num_hour_input * 100) : 0).toFixed(2) + '%'}</td><td></td><td></td></tr></tfoot>
                    </table>
                </div>
            </div>`;
            //某员工每小时产出Chart
            var JobnumhouroutputChart = function (job_num) {
                var data = Tab.Tab5.filter(function (item) {
                    return item.JOB_NUM == job_num;
                });
                var xAxis_Data = data.map(function (item) {
                    return item ? parseInt(item.HOUR) : 0;
                });
                var pass = data.map(function (item) {
                    return item ? parseInt(item.PASS) : 0;
                });
                var fail = data.map(function (item) {
                    return item ? parseInt(item.FAIL) : 0;
                });
                var yield = data.map(function (item) {
                    return item ? parseInt(item.YIELD) : 0;
                });
                var InputData = data.map(function (item) {
                    return item ? item.INPUT : 0;
                });
                var vaulemax = Math.max.apply(null, InputData);
                var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
                var chartDom = document.getElementById("job_num_hour");
                if (chartDom) {
                    echarts.dispose(chartDom);
                }
                var myChart = echarts.init(chartDom);
                var options = {
                    label: {
                        show: true,
                        color: 'white',
                        fontSize: '0.12rem',
                        fontWeight: 'bold'
                    },
                    title: {
                        text: job_num,
                        textStyle: {
                            fontSize: '0.14rem',
                            textAlign: 'center'
                        }
                    },
                    textStyle: {
                        fontSize: '0.1rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.12rem',
                            align: 'left'
                        },
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: ['PASS', 'FAIL', 'YIELD'],
                        width: '100%',
                        itemGap: 10,
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            fontSize: '0.12rem'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis:
                    {
                        yAxisIndex: 9,
                        type: 'category',
                        data: xAxis_Data.map(item => item + ':00'),
                        textStyle: {
                            fontSize: '0.12rem'
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            textStyle: {
                                fontSize: '0.12rem'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            max: yAxismax + (yAxismax / 5),
                            interval: Math.ceil((yAxismax + (yAxismax / 5)) / 6),
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 0,
                            max: 120,
                            interval: 20,
                            scale: true,//刻度范围一致
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                formatter: function (value) {
                                    return value + '%';
                                },
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            data: fail.map(item => parseInt(item) > 0 ? item : null),
                            name: 'FAIL',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    color: '#FF3374',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            data: pass.map(item => parseInt(item) > 0 ? item : null),
                            name: 'PASS',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],
                                    color: '#07C160',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            name: 'YIELD',
                            type: 'line',
                            yAxisIndex: 1,
                            zlevel: 0,
                            data: yield.map(item => parseInt(item) > 0 ? item : 0),
                            lineStyle: { normal: { width: 3 } },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(237, 178, 23, 0.5)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(237, 178, 23, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 12
                                }
                            },
                            itemStyle: { normal: { color: '#EDB217 ' } },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    formatter: function (params) { return params.value + '%'; },
                                    color: '#E1AB19'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(options);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }

            $(".contentdetail").append(job_num_hour_tdbody_tab_html);
            $(".show_mode").css("display", "block");
            JobnumhouroutputChart(job_num);

        }

        //4坏品信息明细
        var failDefectChart = function () {
            $(".contentdetail").empty();
            /*faildefect 明细*/
            var faildefect_data = Tab.Tab8;
            //动态生成表头
            var faildefect_header = "";
            var faildefect_header_keys = Object.keys(faildefect_data[0]);
            faildefect_header_keys.forEach(function (header) {
                faildefect_header = faildefect_header + '<th>' + header + '</th>';
            });
            //生成表体内容
            var defect_qty = 0;
            var faildefect_tabtbody = '';
            faildefect_data.forEach(function (row, index) {
                index++;
                var faildefect_tdbody = '';
                faildefect_header_keys.forEach(function (header, columnindex) {
                    if (header === "DEFECT_QTY") {
                        row[header] = parseInt(row[header] == null ? 0 : parseInt(row[header]));
                        defect_qty = defect_qty + parseInt(row[header]);
                    }
                    if (header === "DEFECT_ITME") {
                        row[header] = row[header] == null ? '&emsp;' : row[header];
                    }
                    if (header === "YIELD") {
                        row[header] = parseInt(row[header]).toFixed(2) + '%';
                    }
                    if (header === "START_TIME") {
                        row[header] = row[header].replace(/\T/g, '&emsp;');
                    }
                    if (header === "TEST_TIME") {
                        row[header] = row[header].replace(/\T/g, '&emsp;');
                    }
                    faildefect_tdbody = faildefect_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${row[header]}</td>`;
                });
                var faildefect_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${faildefect_tdbody}</tr>`;
                faildefect_tabtbody = faildefect_tabtbody + faildefect_trbody;
            });
            var faildefect_tdbody_tab_html = `
            <div style="width:100%;height:50%;"><label>${$('#cmb_process').val()}:Fail Defect Chart</label>
                <div id="faildefect" class="faildefect detail" style="height: 4.7rem;"></div>
            </div>
            <div style="width:100%;height:50%;"><label>${$('#cmb_process').val()}:Fail Defect Data</label>
                <div id="tester_table" class="faildefect opdev detail" style="height: 4.7rem;">
                    <table id="myTable" class="DataSheet" border="1" style="color:black;width: 100%; height: 100%;">
                        <thead><tr>${faildefect_header}</tr></thead>
                        <tbody id="yield_tbody">${faildefect_tabtbody}</tbody>
                        <tfoot><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>${defect_qty}</td><td></td><td></td><td></td></tr></tfoot>
                    </table>
                </div>
            </div>`;
            //柏拉图Chart
            var defectChart = function () {
                var chartDom = document.getElementById("faildefect");
                if (chartDom) {
                    echarts.dispose(chartDom);
                }
                var xAxisData = Tab.Tab7.map(function (item) {
                    return item.DEFECT_ITME;
                });
                var fail = Tab.Tab7.map(function (item) {
                    return item ? item.DEFECT_QTY : 0;
                });
                var yield = Tab.Tab7.map(function (item) {
                    return item ? item.PLATO_VAULE : 0;
                });
                //帕拉图
                var cumulativeSum = 0;
                var cumulativePercent = yield.map(function (item) {
                    cumulativeSum += item;
                    return cumulativeSum.toFixed(2);
                });
                var myChart = echarts.init(chartDom);
                var options = {
                    textStyle: {
                        fontSize: '0.14rem'
                    },
                    label: {
                        show: true,
                        fontSize: '0.12rem',
                        fontWeight: 'bold'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.12rem',
                            align: 'left'
                        },
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: ['FAIL', 'FailRate', 'TotalRate'],
                        width: '100%',
                        itemGap: 10,
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            fontSize: '0.16rem'
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis:
                    {
                        yAxisIndex: 9,
                        type: 'category',
                        data: xAxisData,
                        textStyle: {
                            fontSize: '0.12rem'
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            textStyle: {
                                fontSize: '0.12rem'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            min: 0,
                            splitLine: { show: false },
                            axisTick: {
                                show: true
                            },
                            axisLine: {
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 0,
                            max: 120,
                            interval: 20,
                            scale: true,
                            splitLine: { show: false },
                            axisTick: {
                                show: true
                            },
                            axisLine: {
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                formatter: function (value) {
                                    return value + '%';
                                },
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: 'FAIL',
                            type: 'bar',
                            yAxisIndex: 0,
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            data: fail.map(item => parseInt(item) > 0 ? item : null),
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                        offset: 0,
                                        color: "#ff99b9"
                                    }, {
                                        offset: 0.8,
                                        color: "#ff0051"
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            name: 'FailRate',
                            type: 'line',
                            yAxisIndex: 1,
                            zlevel: 0,
                            data: yield.map(item => parseInt(item) > 0 ? item : 0),
                            lineStyle: { normal: { width: 2 } },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(237, 178, 23, 0.5)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(237, 178, 23, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 10
                                }
                            },
                            itemStyle: { normal: { color: '#EDB217 ' } },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    formatter: function (params) { return params.value + '%'; },
                                    color: '#E1AB19'
                                }
                            }
                        },
                        {
                            name: 'TotalRate',
                            type: 'line',
                            yAxisIndex: 1,
                            zlevel: 0,
                            data: cumulativePercent,
                            lineStyle: { normal: { width: 3 } },
                            itemStyle: { normal: { color: '#00C598 ' } },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                        [
                                            { offset: 0, color: 'rgba(0, 197, 152, 0.5)' },
                                            { offset: 0.8, color: 'rgba(0, 197, 152, 0.1)' }
                                        ], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 12
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    formatter: function (params) { return params.value + '%'; },
                                    color: '#33FFD0'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(options, false);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }

            $(".contentdetail").append(faildefect_tdbody_tab_html);
            $(".show_mode").css("display", "block");
            defectChart();

        }

    </script>
</body>
</html>
